<template>
  <div class="container">
    <!-- 筛选区域 -->
    <div class="filter-section">
      <div class="filter-item">
        <span class="label">选择星期：</span>
        <el-select
            v-model="selectedWeekday"
            placeholder="请选择星期"
            size="mini"
            style="width: 120px"
        >
          <el-option
              v-for="weekday in weekdays"
              :key="weekday.value"
              :label="weekday.label"
              :value="weekday.value"
          />
        </el-select>
      </div>

      <div class="filter-item">
        <span class="label">选择餐别：</span>
        <el-select
            v-model="selectedMeal"
            placeholder="请选择餐别"
            size="mini"
            style="width: 120px"
        >
          <el-option
              v-for="meal in meals"
              :key="meal.value"
              :label="meal.label"
              :value="meal.value"
          />
        </el-select>
      </div>

      <div class="filter-item">
        <el-button type="primary" @click="queryByFilters" size="small">筛选</el-button>
      </div>
    </div>

    <!-- 查询 -->
    <div class="search-section">
      <el-input
          placeholder="请输入膳食名称"
          v-model="queryFoodName"
          size="small"
          style="width: 250px"
      ></el-input>
      <el-button @click="queryByFoodName" type="success" plain size="small">查询</el-button>
      <el-button
          @click="showFoodDialog"
          type="primary"
          size="small"
      >
        上&emsp;架
      </el-button>
    </div>

    <!-- 显示所有膳食信息 -->
    <div class="error-message">{{ errorMessage }}</div>
    <div class="food-list">
      <div v-for="(food, index) in foodList" :key="food.foodId" class="food-item">
        <img :src="food.foodpic" alt="膳食图片" class="food-image">
        <div class="food-details">
          <h3 class="food-name">{{ food.foodname }}</h3>
          <p class="food-price">价格: {{ food.foodprice }} 元</p>
          <p class="food-label">标签: {{ food.foodlabel }}</p>
        </div>
        <div class="food-operations">
          <el-button type="primary" @click="showEditDialog(food.foodId)" size="small">修改</el-button>
          <el-button type="danger" @click="removeOne(food.foodId)" size="small">下架</el-button>
        </div>
      </div>
    </div>

    <div class="pagination-section">
      <el-pagination
          background
          v-model:current-page="pageContains.pageNum"
          v-model:page-size="pageContains.pageSize"
          :page-sizes="[9]"
          layout="total, prev, pager, next"
          :total="pageContains.total"
          @size-change="handleSizeChange"
          @current-change="handlePageChange"
      />
    </div>

    <!-- 膳食信息对话框 -->
    <el-dialog v-model="foodDialog" :title="dialogTitle" class="food-dialog">
      <el-form :model="curFood" label-width="120px">
        <el-form-item label="膳食名称">
          <el-input v-model="curFood.foodname"></el-input>
        </el-form-item>
        <el-form-item label="膳食类别">
          <el-input v-model="curFood.foodtype"></el-input>
        </el-form-item>
        <el-form-item label="膳食标签">
          <el-input v-model="curFood.foodlabel"></el-input>
        </el-form-item>
        <el-form-item label="膳食价格">
          <el-input v-model="curFood.foodprice"></el-input>
        </el-form-item>
        <el-form-item label="是否清真">
          <el-select v-model="curFood.isMuslim">
            <el-option label="是" value="0"></el-option>
            <el-option label="否" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="供应星期">
          <el-select v-model="curFood.supplyDate">
            <el-option v-for="weekday in weekdays" :key="weekday.value" :label="weekday.label" :value="weekday.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="供应类型">
          <el-select v-model="curFood.supplyType">
            <el-option label="早餐" value="1"></el-option>
            <el-option label="午餐" value="2"></el-option>
            <el-option label="晚餐" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="图片地址">
          <el-input v-model="curFood.foodpic"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeFoodDialog">取消</el-button>
        <el-button type="primary" @click="optOne()">{{ buttonOpt }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive } from "vue";
import http from '@/axios/http';
import qs from "qs";

// 存放膳食数据集合
let foodList = ref([]);

// 报错提示
let errorMessage = ref("");

// 模糊查询绑定的 膳食名称
let queryFoodName = ref("");

// 对话框显示控制
let foodDialog = ref(false);

// 膳食信息，或者编辑已有膳食的 绑定数据
let curFood = ref({});

// 登记、修改膳食信息弹出框的 标题和操作按钮  显示文字
let dialogTitle = ref("");
let buttonOpt = ref("");

// 对话框操作类型：1：添加 2：编辑
let dialogOptType = ref(1);

// 星期选项
const weekdays = ref([
  { label: "全部", value: "全部" },
  { label: "星期一", value: "星期一" },
  { label: "星期二", value: "星期二" },
  { label: "星期三", value: "星期三" },
  { label: "星期四", value: "星期四" },
  { label: "星期五", value: "星期五" },
  { label: "星期六", value: "星期六" },
  { label: "星期日", value: "星期日" },
]);

// 餐别选项
const meals = ref([
  { label: "全部", value: "全部" },
  { label: "早餐", value: "1" },
  { label: "午餐", value: "2" },
  { label: "晚餐", value: "3" }
]);

// 选中的星期和餐别
const selectedWeekday = ref("全部");
const selectedMeal = ref("全部");

// 分页相关
let pageContains = ref({
  pageNum: 1,
  pageSize: 9,
  total: 0
});

// 初始化页面
onMounted(() => {
  init();
});

// 初始化方法
function init() {
  getAllFoods();
}

// 查询所有膳食信息
function getAllFoods() {
  let params = {
    pageNum: pageContains.value.pageNum,
    pageSize: pageContains.value.pageSize
  };
  http.post('/lyy/get_all_foods', params).then(
      (res) => {
        let result = res.data;
        if (result.result === 'success') {
          pageContains.value = result.data;
          foodList.value = result.data.list;
        } else {
          errorMessage.value = result.error;
        }
      }
  );
}

// 根据膳食名称和筛选条件查询膳食信息
function queryByFoodName() {
  let param = {
    pageNum: pageContains.value.pageNum,
    pageSize: pageContains.value.pageSize,
    foodname: queryFoodName.value,
    supplyDate: selectedWeekday.value === "全部" ? "" : selectedWeekday.value,
    supplyType: selectedMeal.value === "全部" ? "" : selectedMeal.value
  };
  http.post('/lyy/get_foods_by_name', param).then(
      (res) => {
        let result = res.data;
        if (result.result === 'success') {
          pageContains.value = result.data;
          foodList.value = result.data.list;
        } else {
          errorMessage.value = result.error;
        }
      }
  );
}

// 根据筛选条件查询膳食信息
function queryByFilters() {
  queryByFoodName();
}

// 显示膳食登记对话框
function showFoodDialog() {
  dialogTitle.value = "膳食登记";
  buttonOpt.value = "录入";
  foodDialog.value = true;
  dialogOptType.value = 1; // 设置当前操作类型标志是 录入
  curFood.value = {}; // 清空表单数据
}

// 关闭膳食信息对话框
function closeFoodDialog() {
  foodDialog.value = false;
}

// 添加一条膳食记录
function addFood() {
  let param = curFood.value;
  http.post('/lyy/add_one_food', param).then(
      (res) => {
        let result = res.data;
        if (result.result === 'success') {
          closeFoodDialog();
          getAllFoods();
        } else {
          errorMessage.value = result.error;
        }
      }
  );
}

// 显示编辑对话框
function showEditDialog(foodId) {
  getFoodInfo(foodId);
  foodDialog.value = true;
  dialogTitle.value = "编辑膳食信息";
  buttonOpt.value = "修改";
  dialogOptType.value = 2; // 设置当前操作类型标志是 修改
}

// 根据ID查询膳食信息
function getFoodInfo(foodId) {
  let param = {
    id: foodId
  };
  http.post('/lyy/get_food_by_id', qs.stringify(param)).then(
      (res) => {
        let result = res.data;
        if (result.result === 'success') {
          curFood.value = result.data;
        } else {
          errorMessage.value = result.error;
        }
      }
  );
}

// 删除膳食记录
function removeOne(foodId) {
  let param = {
    id: foodId
  };
  http.post('/lyy/remove_food_by_id', qs.stringify(param)).then(
      (res) => {
        let result = res.data;
        if (result.result === 'success') {
          getAllFoods();
        } else {
          errorMessage.value = result.error;
        }
      }
  );
}

// 修改膳食记录
function editFood() {
  let param = curFood.value;
  http.post('/lyy/modify_food_by_id', param).then(
      (res) => {
        let result = res.data;
        if (result.result === 'success') {
          closeFoodDialog();
          getAllFoods();
        } else {
          errorMessage.value = result.error;
        }
      }
  );
}

// 操作方法
function optOne() {
  if (dialogOptType.value === 1) {
    addFood();
  } else if (dialogOptType.value === 2) {
    editFood();
  }
}

// 分页处理
const handlePageChange = (pageNum1) => {
  pageContains.value.pageNum = pageNum1;
  queryByFilters(); // 重新查询筛选条件下的分页数据
};

const handleSizeChange = (pageSize1) => {
  pageContains.value.pageSize = pageSize1;
  queryByFilters(); // 重新查询筛选条件下的分页数据
};
</script>

<style scoped>
.container {
  max-width: 1000px; /* 减小最大宽度 */
  margin: 0 auto;
  padding: 10px; /* 进一步减小内边距 */
  background-color: #f9f9f9;
  border-radius: 4px; /* 进一步减小边框圆角 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 保持阴影不变 */
}

.filter-section {
  display: flex;
  align-items: center;
  margin-bottom: 10px; /* 进一步减小间距 */
}

.filter-item {
  margin-right: 10px;
}

.label {
  margin-right: 5px; /* 进一步减小间距 */
  font-weight: bold;
  color: #333;
  font-size: 12px; /* 进一步减小字体大小 */
}

.search-section {
  display: flex;
  align-items: center;
  margin-bottom: 10px; /* 进一步减小间距 */
}

.search-section .el-input {
  margin-right: 5px; /* 进一步减小间距 */
  width: 180px; /* 进一步减小输入框宽度 */
}

.error-message {
  color: red;
  margin-bottom: 10px; /* 进一步减小间距 */
  font-size: 12px; /* 进一步减小字体大小 */
}

.food-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px; /* 进一步减小间距 */
}

.food-item {
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
  background-color: #fff;
}

.food-item:hover {
  transform: translateY(-3px);
}

.food-image {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

.food-details {
  padding: 8px;
}

.food-name {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 4px;
  color: #333;
}

.food-price {
  margin: 0;
  color: #666;
  margin-bottom: 4px;
  font-size: 12px;
}

.food-label {
  margin: 0;
  color: #888;
  font-size: 12px;
}

.food-operations {
  padding: 8px;
  text-align: right;
}

.pagination-section {
  margin-top: 10px;
  text-align: center;
}

.food-dialog {
  width: 400px;
  margin: 10px auto;
}

.food-dialog .el-form-item {
  margin-bottom: 10px;
}

.food-dialog .el-button {
  margin-top: 5px;
}

.dialog-footer {
  text-align: right;
  padding: 8px;
  border-top: 1px solid #e4e7ed;
}
</style>